import React, { Component } from 'react'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import noop from 'lodash/noop'

const lineStyle = {
    marginLeft: layout.HORIZONTAL_PADDING,
    marginRight: layout.HORIZONTAL_PADDING,
    padding: '3px 0',
    lineHeight: '18px'
}

const labelStyle = {
    display: 'inline-block',
    color: '#79776A',
    width: '120px'
}

const contentStyle = {
    color: color.DARK,
    wordBreak: 'break-all',
    display: 'inline-block'
}

export default class TextLine extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <li className="flex-h flex-vc" onClick={this.props.onClick} style={Object.assign({}, lineStyle, this.props.style)}>
                <span style={labelStyle}>{this.props.label}</span>
                <span className="flex1" style={Object.assign({}, contentStyle, this.props.contentStyle)}>{this.props.content || this.props.placeholder}</span>
            </li>
        )
    }
}

TextLine.defaultProps = {
    style: {},
    contentStyle: {},
    placeholder: '无',
    onClick: noop
}

TextLine.propTypes = {
    label: React.PropTypes.string.isRequired,
    onClick: React.PropTypes.func,
    contentStyle: React.PropTypes.object,
    style: React.PropTypes.object,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number
    ])
}
